import { defineView } from "@/routers/tools.mjs";

/**
 * @ngInject
 * @type {DefineView}
 */
const dmmView = defineView({
  controller: class {
    isOpen = false;

    static $inject = ["$scope", "$element", "$timeout"];

    /**
     * @param {ng.IScope} $scope
     * @param {ng.IAugmentedJQuery} $element
     * @param {ng.ITimeoutService} $timeout
     */
    constructor($scope, $element, $timeout) {
      this.$scope = $scope;
      this.$element = $element;
      this.$timeout = $timeout;
    }

    $onInit() {
      this.$timeout(() => {
        /**
         * @type {JQuery<HTMLButtonElement>}
         */
        const btnToggle = this.$element.find("button[data-toggle]");
        const targetType = btnToggle.data("toggle");
        /**
         * @type {string}
         */
        const targetSelector = btnToggle.data("target");
        const modalComp = this.$element.find(targetSelector);
      });
    }

    onClickModal() {
      this.isOpen = true;
    }

    onCloseModal() {
      this.isOpen = false;
    }
  },
  controllerAs: "vm",
  template: /* HTML */ html`
    <!-- Button trigger modal -->
    <button
      type="button"
      class="btn btn-primary btn-lg"
      data-toggle="modal"
      data-target="#myModal"
      ng-click="vm.onClickModal()"
    >
      Launch demo modal
    </button>

    <!-- Modal -->
    <div
      class="modal fade"
      ng-class="{'block in':vm.isOpen}"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            +
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
              ng-click="vm.onCloseModal()"
            >
              <span ng-attr-aria-hidden="{{!vm.isOpen}}">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">...</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  `,
});

export default dmmView;
